<template>
	<el-scrollbar v-show="show && showMembers.length" class="group-member-choose">
		<div v-for="(member, idx) in showMembers" :key="member.id" class="member-item" @click="onSelectMember(member)">
			<chat-group-member :member="member" :height="40" :active="activeIdx === idx" />
		</div>
	</el-scrollbar>
</template>

<script>
import ChatGroupMember from "./ChatGroupMember.vue";
export default {
	name: "chatAtBox",
	components: {
		ChatGroupMember
	},
	props: {
		searchText: {
			type: String,
			default: ""
		},
		ownerId: {
			type: Number,
		},
		members: {
			type: Array
		}
	},
	data () {
		return {
			show: false,
			pos: {
				x: 0,
				y: 0
			},
			activeIdx: 0,
		};
	},
	computed: {
    showMembers() {
      if (this.searchText) {
        return this.members.filter(member => 
          member.showNickName.toLowerCase().includes(this.searchText.toLowerCase())
        );
      }
      return this.members;
    }
  },
  methods: {
    onSelectMember(member) {
      this.$emit('select', member);
      console.log('Member selected:', member);
    }
  }

}
</script>

<style scoped lang="scss">
.group-member-choose {
	position: fixed;
	width: 200px;
	height: 300px;
	border: 1px solid #53a0e79c;
	border-radius: 5px;
	background-color: #f5f5f5;
	box-shadow: 0px 0px 10px #ccc;
}
</style>